<template>

	<view class="layout">

		<view class="layout-head">
			<Search @onConfirm="onConfirm" v-model="query" :iconType="CustomIconName.Add" @onIcon="onAdd"></Search>
			<u-tabs :list="NavList" :is-scroll="false" :current="navCurrentIndex" @change="changeNav"></u-tabs>
		</view>

		<view class="layout-body">
			<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<DepartmentCard v-for="item  in data" :key="row.serialVersionUID" :type="navCurrentCode" :data="item">
				</DepartmentCard>
			</mescroll-uni>
		</view>
	</view>
</template>


<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import DepartmentCard from '@/components/card/sendRepair/department/index.vue'
	import Search from '@/components/input/index.vue'
	import RepairApi from '@/apis/repair.js'
	import SendRepairRouterConfig from '@/sendRepair/routerConfig.js'
		import CustomIconName from '@/common/customIconFontName.js'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			DepartmentCard,
			Search,
		},
		data() {
			return {
				CustomIconName,
				requestApi: RepairApi.department.initListName,
				data: [],
				navCurrentIndex: 0,
				navCurrentCode: 'toBeTaken',
				initQueryParams: {
					template: '1',
					currentState: '',
					query: ''
				},
				redNum: {
					toBeTaken: '',
					distribution: '',
					oneself: '',
					review: ''
				},
			}
		},
		computed: {
			// 1待取走2配送中3科室自取4报价审核
			NavList() {
				// 查询模板 1报价2取货3维修4送回
				return [{
					name: '待取走',
					count: this.redNum.toBeTaken,
					temp: "1",
					code: 'toBeTaken'
				}, {
					name: '配送中',
					count: this.redNum.distribution,
					temp: "2",
					code: 'distribution'
				}, {
					name: '科室自取',
					count: this.redNum.oneself,
					temp: "3",
					code: 'oneself'
				}, {
					name: '报价审核',
					count: this.redNum.review,
					temp: "4",
					code: 'review'
				}, ]
			}
		},

		onLoad(params) {
			this.init()
		},
		methods: {
			async init() {
				let res = await RepairApi.department.initRedNumData()
				let vals = res.body

				this.$set(this.redNum, 'toBeTaken', vals.pickCount)
				this.$set(this.redNum, 'distribution', vals.sendCount)
				this.$set(this.redNum, 'oneself', vals.deptTakeCount)
				this.$set(this.redNum, 'review', vals.auditCount)
			},
			initQuery() {
				// this.$refs.mescrollItem.initData(this.initQueryParams)
			},
			changeNav(index) {
				this.navCurrentIndex = index
				const {
					code,
					temp
				} = this.NavList[index]
				this.navCurrentCode = code
				this.$set(this.initQueryParams, 'template', temp)
				this.mescroll.resetUpScroll() // 再刷新列表数据

			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('upCallback', );
				let query = {
					pageSize: page.size,
					pageNum: page.num,
					query: '',
				}
				Object.assign(query, this.initQueryParams)
				this.$nextTick(() => {
					this.$pop.ajaxPost(this.requestApi, query).then((res) => {
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态; 
						if (page.num == 1) this.data = []; //如果是第一页需手动制空列表
						if (res.code === 0) {
							let list = res.body.list || []
							// this.mescroll.endSuccess(list.length);
							this.mescroll.endByPage(list.length, res.body.total)
							if (list.length) {
								this.data = [...this.data, ...list]
							}
						}
					}).catch((err) => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				})

			},
			//点击空布局按钮的回调
			emptyClick() {

			},

			// 切换菜单
			tabChange() {
				this.data = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			onAdd() {
				wx.navigateTo({
					url: SendRepairRouterConfig.Department.AddSendRepair
				})
			},
			onConfirm(val) {
				this.data = []
				this.$set(this.initQueryParams, 'query', val)
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},


		}
	}
</script>


<style lang="scss">
	/*根元素需要有固定的高度*/
	page {
		height: 100%;

		.layout {
			height: 100%;
			background-color: #F0F3F7;
			display: flex;
			flex-direction: column;


			&-head {
				// height: 200rpx; 	QW
			}

			&-body {
				padding: 0 30rpx;
				flex: 1;
				min-width: 0;
				min-height: 0;

			}
		}
	}
</style>
